<template>
	<Layout :showFooter="true">
		<template #title>留言</template>
		<uni-forms ref="formRef" :model="formData" :rules="rules" class="crud-form">
			<InfoBlock standard customStyle="margin-top:18rpx;" customInnerStyle="padding:10rpx 24rpx 0 24rpx;">
				<uni-forms-item :label-width="0" name="feedbackDetail">
					<view class="flex column fill">
						<uni-easyinput type="textarea" :inputBorder="false" v-model="formData.feedbackDetail"
							:maxlength="500" placeholder="请输入内容"></uni-easyinput>
						<view class="iflex fill jcfe" style="font-size: 28rpx; color:#909090;">
							{{formData.feedbackDetail.length}}/500
						</view>
					</view>
				</uni-forms-item>
			</InfoBlock>
			<SectionTitle showLine :showRight="false"><template #title>联系方式</template></SectionTitle>
			<InfoBlock form customStyle="margin-top:18rpx;">
				<uni-forms-item label="联系电话" name="contactPhone" :label-width="75">
					<uni-easyinput :inputBorder="false" v-model="formData.contactPhone" :maxlength="11"
						placeholder="请输入联系电话"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="联系人" :label-width="75" name="nickname">
					<uni-easyinput :inputBorder="false" v-model="formData.nickname" :maxlength="20"
						placeholder="请输入联系人"></uni-easyinput>
				</uni-forms-item>
			</InfoBlock>

		</uni-forms>
		<template #footer>
			<view class="common-footer">
				<u-button style="width:100%;" :custom-style="{width:'100%'}" type="primary" size="large" :fill="true"
					@click.stop="tapSubmit">提交</u-button>
			</view>
		</template>
	</Layout>
	<LoginPopup v-model="showLoginPopup"></LoginPopup>
</template>

<script setup lang="ts" name="LawyerEditFile">
	import { ref, toRaw } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { saveMessage } from '@/apis/common';
	import { isLogin } from '@/utils/auth';
	const showLoginPopup = ref(false);

	onLoad(() => {
		setTimeout(() => {
			showLoginPopup.value = !isLogin();
		}, 300);
	});

	const formRef = ref();
	const formData = ref<AnyObj>({
		feedbackDetail: '',
		contactPhone: '',
		nickname: '',
		feedbackType: 1,
	});

	const rules = ref({
		feedbackDetail: {
			rules: [
				{ required: true, errorMessage: '请输入留言内容' },
				{
					minLength: 1,
					maxLength: 500,
					errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		contactPhone: {
			rules: [
				{ required: true, errorMessage: '请输入联系电话' },
				{
					minLength: 11,
					maxLength: 11,
					errorMessage: '长度11个字符',
				}
			]
		},
		nickname: {
			rules: [
				{ required: true, errorMessage: '请填写联系人' },
				{
					minLength: 1,
					maxLength: 20,
					errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
	})

	function tapSubmit() {
		if (!isLogin()) {
			showLoginPopup.value = true;
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			});
			return
		}


		formRef.value.validate().then((res : AnyObj) => {
			console.log('表单数据信息：', res);
			const data = { ...toRaw(formData.value) };
			saveMessage(data).then((result) => {
				if (result.code !== 200) {
					uni.showToast({
						icon: 'none',
						title: result.msg ?? '服务器忙请稍后再试'
					});
					return;
				}
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				});
				setTimeout(() => {
					uni.navigateBack({
						fail: () => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					});
				}, 1500)
			});
		}).catch((err : any) => {
			console.log('表单错误信息：', err);
		})
	}
</script>

<style lang="scss">
	.form-portrait {
		margin-left: 32rpx;
		width: 686rpx;
	}

	.uni-forms-item__label {
		// width: 150rpx !important;
		font-size: 30rpx !important;
		color: black !important;
	}

	.uni-forms-item__content {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-input-placeholder {
		text-align: right;
	}

	.uni-forms-item__error {
		text-align: right;
		left: auto !important;
		right: 0 !important;
	}

	.uni-easyinput__content-input {
		text-align: right;
	}

	.uni-easyinput__placeholder-class {
		font-size: 28rpx !important;
		color: #909090 !important;
	}
</style>